<template>
	<view class="shop flex flexC flexW flexB px10 py12 mb8">
		<!-- <view class="flex flexS">
			<view class="fs10 rel r2 mt4">
				<image @click="lookRoom" class="logo r2 " :src="item.logo" mode="aspectFill"></image>
				<view class="tag tag2 aliC py3 bold8 fs12" v-if="item.status == 'busy'">使用中</view>
				<view class="tag tag4 aliC py3 bold8 fs12" v-if="item.status == 'stop'">维护中</view>

			</view>
			<view class="flex1 pl8">
				<view class="ellipsis1">
					<text class="c00 bold6 fs16">{{item.name}}</text>
					<text class="arrowR dinline"></text>
				</view>
				<view class="mt6 bor57 r3 px8 py2 fs14 flex flexC flexB">
					<text class="">{{item.rule.time1}}</text>
					<text class="cff0 bold6">￥{{item.rule.price1}}元/60分钟</text>
				</view>
				<view class="mt6 bor57 r3 px8 py2 fs14 flex flexC flexB">
					<text class="">{{item.rule.time2}}</text>
					<text class="cff0 bold6">￥{{item.rule.price2}}元/60分钟</text>
				</view>
				<view class="fs14 flex flexC mt6 fs14">
					<view class="flex1"></view>
					<view v-if="item.status != 'busy'"  @click="clickBook" class="bor57 aliC w-6 r2">
						<view class="bgf6c py3 fs14 bold6">立即开台</view>
						<view class="fs14 py2" >空闲</view>
					</view>
					<view v-else class="bor57 aliC w-6 r2">
						<view class="bgf6c py3 fs14 bold6">
							使用中
						</view>
						
					</view>
				</view>
			</view>
		</view> -->
		<block v-for="(item,index) in tableList" :key="index">
			<view v-if="item.status == 'free'" class="item">
				<view class="flex flexC flexCol flexJC  cff relbox ">
					<image class="bgImg" src="/static/img/bg/ball_bg.png" mode="widthFix"></image>
					<view class="fs18 name">{{item.name}}</view>
					<view class="flex flexC btns cff fs12 mt14" @click="clickBook(item)">
						<text class="btn1 px10 py8">预定</text>
						<text class="btn2  px10 py8">立即开台</text>
					</view>
				</view>
				<view class="fs12 c33 aliC mt5">
					<text class="">{{item.time}}</text>
					<text class="cff0">￥{{item.price}}</text>
					<text>/60分钟</text>
				</view>
			</view>
			<view v-else-if="item.status == 'busy'" class="item">
				<view class="flex flexC flexCol flexJC cff relbox box2">
					<image class="bgImg" src="/static/img/bg/ball_bg2.png" mode="widthFix"></image>
					<view class="fs18 name">{{item.name}}</view>
					<view class="c66 fs11 btns py3">预计等待</view>
					<view class="cff0 fs11 btns">
					<!-- 	<text class="bgff0 cff r2 px1">00</text>
						<text class="px4">时</text>
						<text class="bgff0 cff r2 px1">00</text>
						<text class="pl4">分</text> -->
					  <uni-countdown :showDay="false" :hour="item.h" :minute="item.m" :second="item.s" color="#FFFFFF" background-color="#FF0000" />

					</view>
				</view>
				<view class="fs12 c33 aliC mt5">
					<text class="">{{item.time}}</text>
					<text class="cff0">￥{{item.price}}</text>
					<text>/60分钟</text>
				</view>
			</view>
			<view v-else class="item">
				<view class="flex flexC flexCol flexJC cff relbox box2">
					<image class="bgImg" src="/static/img/bg/ball_bg2.png" mode="widthFix"></image>
					<view class="fs18 name">{{item.name}}</view>
					<view class="c66 fs11 btns py3">台桌维护中</view>
					<view class="cff0 fs11 btns">
					<!-- 	<text class="bgff0 cff r2 px1">00</text>
						<text class="px4">时</text>
						<text class="bgff0 cff r2 px1">00</text>
						<text class="pl4">分</text> -->
					  <!-- <uni-countdown :showDay="false" :hour="item.h" :minute="item.m" :second="item.s" color="#FFFFFF" background-color="#FF0000" /> -->
			
					</view>
				</view>
				<view class="fs12 c33 aliC mt5">
					<text class="">{{item.time}}</text>
					<text class="cff0">￥{{item.price}}</text>
					<text>/60分钟</text>
				</view>
			</view>
		</block>
		
	</view>
</template>

<script>
	export default {
		name: "storeItem",
		props: {
			tableList: {
				type: Array,
				default: []
			}
		},
		methods: {

			lookRoom() {
				let image = Array();
				uni.previewImage({
					urls: this.item.cover,
				});
			},

			clickBook(item) {
				uni.navigateTo({
					url: '../shop/ball?id=' + item.id
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.shop {
		.relbox {
			position: relative;
			width: 340rpx;
			height: 234rpx;
			&.box2 {
				.name{
					color: #00CA69;
				}
				.bgff0 {
					background-color: #F95C28;
				}
			}
			.name,.btns {
				position: relative;
				z-index: 1;
			}
			.btns {
				.btn1 {
					background-color: #00CA69;
					border-radius: 80rpx 0 0 80rpx;
				}
				.btn2 {
					background-color: #00B760;
					border-radius: 0 80rpx 80rpx 0;
				}
			}
		}
		.bgImg {
			position: absolute;
			top: 0;
			left: 0;
			width: 340rpx;
			height: 234rpx;
			z-index: 0;
		}
		.rel {
			position: relative;
			overflow: hidden;
			.tag {

				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				border-radius: 0 0 4rpx 4rpx;
				background-color: #ecd827;

				&.tag2 {
					background-color: #F3D25D;
					color: #000000;
				}

				&.tag3 {
					background-color: #5C8ACB;
					color: #FFFFFF;
				}

				&.tag4 {
					background-color: #FF0000;
					color: #FFFFFF;
				}

			}
		}

		.logo {
			width: 200rpx;
			height: 228rpx;
		}

		.ellipsis1 {
			width: 436rpx;

			&.flex1 {
				width: 280rpx;
			}
		}

		.local {
			width: 24rpx;
			height: 24rpx;
		}

		.w18 {
			width: 36rpx;
			height: 36rpx;
		}

		.bgc3 {
			background-color: #C3C3C3;
		}

		.line {
			position: relative;
			height: 10rpx;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				right: 0;
				background: #7E7E7E;
				width: 2rpx;
				height: 10rpx;
				display: inline-block;
			}

			&:last-child {
				&::after {
					display: none;
				}
			}
		}

		.w12 {
			width: calc(100% / 24);
		}

	}
</style>